{extend name="base" /}
{block name="body"}
<div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item">
                    <form action="{:url('user/analysis/index')}" class="layui-form" method="get">
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dateframe" class="layui-input" id="test-laydate-range-date" placeholder="{$dateframe}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <select name="type">
                            <option value="">统计类型</option>
                            <option value="1">新增客户</option>
                            <option value="2">新增回访（跟踪）</option>
                            <option value="3">新增提醒</option>
                            <option value="4">新增交易</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-primary ajax-search"><i class="fa fa-search"></i> 查看数据</button>
                    </div>
                    
                    <div class="layui-inline">
                        <label class="layui-form-label">快捷统计</label>
                        <a href="{:url('user/customer/add')}" class="layui-btn"><i class="fa fa-plus-circle"></i> 新增客户</a>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <!--访问量-->
    <style>
        .layuiadmin-big-font{font-size:66px;color:#666;text-align: center;line-height:36px;padding:5px 0 10px;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}
        .layuiadmin-badge{font-size:36px;}
    </style>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-user"></i> 客户总数据
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">
                    <span class="layuiadmin-badge">{$data.all_customer}</span> 
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-user"></i> 今日新增客户
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">
                    <span class="layuiadmin-badge">{$data.today_customer}</span> 
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-phone"></i> 总跟踪记录
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">
                    <span class="layuiadmin-badge">{$data.all_track}</span> 
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-phone"></i> 今日跟踪记录
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">
                    <span class="layuiadmin-badge">{$data.today_track}</span> 
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-comment"></i> 未处理提醒
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">
                    <span class="layuiadmin-badge">{$data.remind_no}</span> 
                </p>
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-comment"></i> 已处理提醒
            </div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">
                    <span class="layuiadmin-badge">{$data.remind_yes}</span> 
                </p>
            </div>
        </div>
    </div>
    
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">{$name}</div>
            <div class="layui-card-body">

                <div id="container" style="height: 400px;"></div>

            </div>
        </div>
    </div>
    
</div>
{/block}
{block name="js"}
<script src="/static/js/echarts.common.min.js"></script>  
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '{$dateframe} - {$name}',
            left: 'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            name: '日期',
            splitLine: {show: true},
            data: [
            <?php foreach ($array as $r) {?>
                '{$r}',
            <?php }?>]
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [{
            name: '数量',
            data: [<?php foreach ($value as $r) {?>
                    {$r},
                    <?php }?>],
            type: 'line',
            label:{
                normal:{
                    show:true,
                    position:'top',
                    textStyle: {
                        color: '#333',
                        fontSize: 18
                    }
                }
            }
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
 <script src="/static/layuiadmin/layui/layui.js"></script> 
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'laydate'], function(){
    var laydate = layui.laydate;
    
    //示例代码
    
    //日期范围
    laydate.render({
      elem: '#test-laydate-range-date'
      ,range: true
    });
  });
  </script>
{/block}